<html>
    <head>
        <style>
        img{max-width:100px;max-height:100px;margin: 0 0;}  
        /*定义显示的格式*/
        p{
            color:  black;
            font-family: "Arial", "san-serif";
            font-size: 14px;
            display: inline;
        }
        /*自己的消息*/
        .myMsg{
            max-height: 300px;
            max-width:  300px;
            position: relative;
            float: right;
        }
        /*显示自己的头像*/
        .divMyHead{
            position: relative;
            float: right;
            margin:5px 0px 5px 0px;
            right: 1px;
            border-radius: 5px;
            }
        /*对方的消息*/
        .otherMsg{
            max-height: 300px;
            max-width:  300px;
            position: relative;
            float: right;
        }
        /*显示对方的头像*/
        .divotherHead{
            position: relative;
            float: left;
            margin:5px 0px 0px 0px;
            left: 1px;
            border-radius: 5px;
        }
        /*实现左边的气泡*/
        .triangle-left{
            float:left;
            max-width:380px;
            border:1px solid #ffffff;
            border-radius:5px;
            padding:5px;
            background:#ffffff;
            position:relative;
            display:inline-block;
            margin:5px 0px 5px 20px;
            word-wrap: break-word;
        }

        .triangle-left:before{
            position:absolute;
            content:"";
            display:block;
        }
        /*实现对方消息的那个小三角，小三角的实现其实是将一个正方形对角线划分为四个小三角，其余的三个设置颜色不可见，只将对自己有用的那一个留下来*/
        .triangle-left.left:before{
            border-color:rgba(0, 0, 0, 0) #ffffff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
            border-width:5px 5px 5px 0;
            border-style:solid;
            bottom:auto;
            left:-5px;
            top:8px;
        }
        .triangle-left.left:after{
            border-color:rgba(0, 0, 0, 0) #ffffff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
            border-width:5px 5px 5px 0;
            border-style:solid;
            bottom:auto;
            left:-5px;
            top:8px;
        }
        /*实现右边的气泡*/
        .triangle-right{
            float:right;
            max-width:380px;
            border:1px solid #bedfff;
            border-radius:5px;
            padding:5px;                        
            background:#bedfff;
            position:relative;
            display:inline-block;
            margin:5px 20px 5px 0;
            word-wrap: break-word;
        }
        .triangle-right:before{
            position:absolute;
            content:"";
            display:block;
        }
        .triangle-right.right:before{
            border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #bedfff;
            border-width:5px 0px 5px 5px;
            border-style:solid;
            bottom:auto;
            right:-6px;
            top:8px;
        }
        .triangle-right.right:after{
            border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #bedfff;
            border-width:5px 0px 5px 5px;
            border-style:solid;
            bottom:auto;
            right:-6px;
            top:8px;
        }
        </style>
		<script type="text/javascript" src="Configuration/qwebchannel.js"></script>
        <script language="JavaScript" >
			// 启动加载函数
			window.onload = function ()
			{
				new QWebChannel(qt.webChannelTransport, function(channel) 
				{
					var interactObj = channel.objects.interactObj; // 获取Qt类交互对象
					interactObj.signalSendString.connect(function(str) // 链接Qt类信号函数，接收从Qt传递过来的字符串
					{
						var obj = document.getElementById("content");
						alert(str);
						obj.insertAdjacentHTML("beforeEnd",str);
					});
				});
            }
			// 按钮点击事件
			function msg(str)
            {
				new QWebChannel(qt.webChannelTransport, function(channel) 
				{
					var interactObj = channel.objects.interactObj;// 获取Qt类交互对象
					interactObj.slotRecvString(str);//调用Qt类公有函数，将click信息传递至Qt
				});
            }
        </script>
    </head>
		
    <body id="content" style='background:rgba(123,123,123,0.5)'>
		<div style='overflow:hidden;'>
			<p class='divMyHead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('123456');"/> 
			</p>
			<p class='triangle-right right'>nice</p>
		</div>
		<div style='overflow:hidden;'>
			<p class='divotherhead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('88888888');"/> 
			</p>
			<p class='triangle-left left'>nice</p>
		</div>
		
		
		<div style='overflow:hidden;'>
			<p class='divotherhead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('123456');"/> 
			</p>
			<p class='triangle-left left' >
				<span style=" font-family:'微软雅黑'; font-size:15pt; font-weight:320; font-style:italic; color:#ff2bd8;">大叔ccccc ccccccc cccccccccccc</span>
				<span style=" font-family:'微软雅黑'; font-size:15pt; font-weight:320; font-style:italic; color:#ff2cc8;">撒大声撒大ffffff fffffff声地地是多少</span>
				<img src="1.jpg" />
				<span style=" font-family:'楷体'; font-size:15pt; font-weight:600; color:#ff2bd8;">舒服舒服付付付付付付</span>
				<span style=" font-family:'楷体'; font-size:15pt; font-weight:600; font-style:italic; color:#ff2bd8;">是否是沙发斯蒂芬</span>
				<img src="5.gif" />
				<img src="2.gif" />
				<img src="3.gif" />
				<img src="4.gif" />
			</p>
		</div>
		
		
		
		
				<div style='overflow:hidden;'>
			<p class='divMyHead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('123456');"/> 
			</p>
			<p class='triangle-right right'>nice</p>
		</div>
		<div style='overflow:hidden;'>
			<p class='divotherhead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('88888888');"/> 
			</p>
			<p class='triangle-left left'>nice</p>
		</div>
				<div style='overflow:hidden;'>
			<p class='divMyHead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('123456');"/> 
			</p>
			<p class='triangle-right right'>nice</p>
		</div>
		<div style='overflow:hidden;'>
			<p class='divotherhead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('88888888');"/> 
			</p>
			<p class='triangle-left left'>nice</p>
		</div>
				<div style='overflow:hidden;'>
			<p class='divMyHead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('123456');"/> 
			</p>
			<p class='triangle-right right'>nice</p>
		</div>
		<div style='overflow:hidden;'>
			<p class='divotherhead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('88888888');"/> 
			</p>
			<p class='triangle-left left'>nice</p>
		</div>
				<div style='overflow:hidden;'>
			<p class='divMyHead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('123456');"/> 
			</p>
			<p class='triangle-right right'>nice</p>
		</div>
		<div style='overflow:hidden;'>
			<p class='divotherhead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('88888888');"/> 
			</p>
			<p class='triangle-left left'>nice</p>
		</div>
				<div style='overflow:hidden;'>
			<p class='divMyHead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('123456');"/> 
			</p>
			<p class='triangle-right right'>nice</p>
		</div>
		<div style='overflow:hidden;'>
			<p class='divotherhead'>
				<img src='1.jpg' width='30px' height='30px' onclick="msg('88888888');"/> 
			</p>
			<p class='triangle-left left'>nice</p>
		</div>
    </body>
</html>
